<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="48">
          <a-col :md="8" :sm="8">
            <a-form-item label="学院">
              <a-select
                showSearch
                :allowClear="true"
                placeholder="请选择"
                v-model="queryParam.institute"
                @change="changeCollege"
                :options="collegeList"
              >
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="8">
            <a-form-item label="导员名称">
              <a-select
                showSearch
                :allowClear="true"
                placeholder="请选择"
                @change="changeAssistant"
                v-model="queryParam.assistantId"
                :options="assistantList"
              >
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="8">
            <a-form-item label="学生姓名">
              <a-input placeholder="请输入学生姓名" v-model="queryParam.studentName"/>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="8">
            <a-form-item label="时间段">
              <a-select
                v-model="queryParam.timeScope"
                placeholder="请选择时间段"
                :allowClear="true"
                @change="changeTimeScope"
                :options="timeList">
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :md="8" :sm="24">
            <a-button @click="() => {this.queryPage()}" type="primary">查询</a-button>
            <a-button @click="() =>{this.queryParam = {}}" style="margin-left: 8px">重置</a-button>
            <!--            <a-button @click="()=>{this.exportData('/wfucheckin/exportSignDetails', '时间段签到记录')}"-->
            <!--                      style="margin-left: 8px">导出-->
            <!--            </a-button>-->
          </a-col>
        </a-row>
      </a-form>
    </div>
    <div class="table-operator">
      <!--  <a-button @click="(e) => this.goToUpload()" style="margin-bottom: 8px">
         导入
       </a-button> -->
    </div>
    <v-table
      :table-column="columns"
      :data="loadData"
      :rowKey="record => record.id"
      bordered
      ref="table"
      style="margin-top:8px"
    >
      <template v-slot:action='{ text, row }'>
        <div class="actionColumn" v-if="row.status==='未处理'">
          <span>
            <a-divider type='vertical'/>
            <a href='javascript:' @click='processAlarm(row)'>处理</a>
          </span>
        </div>
      </template>
    </v-table>
    <!--    <Wfu-alarm-detail-->
    <!--      @ok="queryPage"-->
    <!--      ref="WfuAlarmDetail">-->
    <!--    </Wfu-alarm-detail>-->
    <process-alarm-detail
      ref="processAlarmDetail"
      @ok="queryPage"
    />
  </a-card>
</template>

<script>
import {TableMixin} from '@/mixins/TableMixin'
import {assistantList, collegeList, dropDownTimeCode} from '@api/base/wfuBase'
import processAlarmDetail from "@views/modules/wfucheck/processAlarm/processAlarmDetail";
import {processAlarmPage} from "@api/wfuAlarm/wfuAlarm";

export default {
  components: {
    processAlarmDetail
  },
  mixins: [TableMixin],
  name: 'processAlarm',
  data() {
    return {
      timeList: [],
      columns: [
        {
          title: '姓名',
          width: '80px',
          field: 'studentName'
        },
        {
          title: '学号',
          width: '120px',
          field: 'studentCode'
        },
        {
          title: '班级',
          width: '300px',
          field: 'major'
        },
        {
          title: '电话',
          width: '120px',
          field: 'mobile'
        },
        {
          title: '导员',
          width: '80px',
          field: 'assistantName'
        },
        {
          title: '问题时间段',
          width: '100px',
          field: 'timeScope'
        },
        {
          title: '异常类型',
          width: '180px',
          field: 'alarmType'
        },
        {
          title: '规定方向',
          width: '180px',
          field: 'direction'
        },
        {
          title: '之前打卡点',
          width: '100px',
          field: 'previousAddress'
        },
        {
          title: '当前处理状态',
          width: '120px',
          field: 'status'
        },
        {
          title: '异常情况说明',
          width: '300px',
          field: 'description',
        },
        {
          title: '操作',
          width: '120px',
          field: 'action',
          fixed: 'right',
          slot: true
        },
      ],
      assistantList: [],
      collegeList: [],
      queryParam: {
        institute: '',
        assistantId: '',
        studentName: '',
        timeScope: '',
        alarmType: '',
        studentId: '',
        description: '',
        isMobile: undefined
      },
      loadData: parameter => {
        return processAlarmPage(
          Object.assign(parameter, this.queryParam)
        ).then(res => {
          return res.data
        })
      }
    }
  },
  watch: {
    '$route'() {
      this.init()
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.queryParam.timeScope = this.$route.query.type
      this.queryParam.assistantId = this.$route.query.assistantId
      this.queryParam.institute = this.$route.query.institute
      assistantList(this.queryParam.institute).then(res => {
        this.assistantList = res.data
      })
      collegeList().then(res => {
        this.collegeList = res.data
      })
      dropDownTimeCode().then(res => {
        this.timeList = res.data
      })
      this.queryPage()
    },
    processAlarm(record) {
      this.queryParam.studentId = record.studentId
      this.$refs.processAlarmDetail.show(this.queryParam)
    },
    changeTimeScope(e) {
      this.queryParam.type = e
      this.$forceUpdate()
    },
    changeDeviceGroup(e) {
      this.queryParam.deviceGroup = e
      this.$forceUpdate()
    },
    changeCollege(e) {
      this.queryParam.institute = e
      this.queryParam.assistantId = undefined
      assistantList(this.queryParam.institute).then(res => {
        this.assistantList = res.data
      })
      collegeList().then(res => {
        this.collegeList = res.data
      })
      this.$forceUpdate()
    },
    changeAssistant(e) {
      this.queryParam.assistantId = e
      this.$forceUpdate()
    }
  }
}
</script>

<style scoped>

</style>
